import React, { Component } from "react";
import Item from "../Item";
import "./index.css";
import propTypes from "prop-types";

export default class List extends Component {
  static propTypes = {
    todos: propTypes.array.isRequired,
    checkTodo: propTypes.func.isRequired,
    deleteTodo: propTypes.func.isRequired,
  };
  render() {
    const { todos, checkTodo, deleteTodo } = this.props;
    return (
      <ul className="todo-main">
        {todos.map((todo) => {
          return (
            <Item
              key={todo.id}
              {...todo}
              checkTodo={checkTodo}
              deleteTodo={deleteTodo}
            />
          );
        })}
        {/* ReactDOM.render(<Person {...p} />, document.getElementById("test3")); */}
      </ul>
    );
  }
}
